<div id="top-left">
  <span class="location-title">点播视频库</span>
  <nz-breadcrumb [nzSeparator]="iconTemplate">
    <nz-breadcrumb-item>
      <a [routerLink]="['/main/vod']">首页</a>
    </nz-breadcrumb-item>
    <nz-breadcrumb-item>
      {{categoryName}}
    </nz-breadcrumb-item>
  </nz-breadcrumb>
  <ng-template #iconTemplate><i nz-icon nzType="caret-right" nzTheme="outline"></i></ng-template>
</div>
<div class="main-content">
  <div class="row row-center">
    <nz-upload nzAction="#" [nzShowUploadList]="false" [nzCustomRequest]="createNew">
      <button nz-button nzType="primary"><i nz-icon nzType="plus"></i>上传视频</button>
    </nz-upload>
    <nz-upload style="margin-left: 10px;" [nzShowUploadList]="false" [nzAction]="coverUploadUrl" [nzHeaders]="headers"
      nzName="file" [nzBeforeUpload]="beforeUpload" (nzChange)="handleCategoryChange($event)">
      <button nz-button nzType="primary"><i nz-icon nzType="file-image"></i>上传封面</button>
    </nz-upload>
    <img *ngIf="categoryCover != ''" style="margin-left: 10px; height: 32px; border-radius: 5px;"
      [src]="ossUrl + categoryCover" />
    <button style="margin-left: 10px;" (click)="deleteCategory()" [nzDanger]="true" nz-button nzType="primary"><i
        nz-icon nzType="delete"></i>删除视频库</button>
  </div>
  <div class="row wrap container">
    <div class="video-item" *ngFor="let item of datalist; let no = index">
      <div *ngIf="item['id']">
        <div class="video-logo" (mouseover)="setMouseOver(no, true)">
          <img *ngIf="item['logo'] && item['logo'] !== ''" [src]="ossUrl + item['logo']" alt="" title="" />
        </div>
        <div class="video-title">
          <input nz-input placeholder="请输入标题" [(ngModel)]="item['title']" (change)="changTitle(no);" />
        </div>
        <div class="row between plr10 video-des">
          <div>{{item.date|date:'yyyy-MM-dd'}}</div>
          <div class="row center">
            <i style="font-size: 16px; color: #666;" nz-icon nzType="eye" nzTheme="outline"></i>
            <span style="margin-left: 8px;">{{item['watchCount']}}</span>
          </div>
        </div>
        <div *ngIf="item['isOver'] || item['uploading']" class="video-opration" (mouseleave)="setMouseOver(no, false)">
          <nz-upload nz-tooltip nzTooltipTitle="修改封面" [nzShowUploadList]="false" [nzAction]="logoUploadUrl"
            [nzHeaders]="headers" nzName="file" [nzBeforeUpload]="beforeUpload"
            (nzChange)="handleLogoChange($event, no)">
            <i nz-icon nzType="file-image"></i>
          </nz-upload>
          <a (click)="play(no)" nz-tooltip nzTooltipTitle="播放"><i nz-icon nzType="play-square"
              nzTheme="outline"></i></a>
          <a (click)="openShareSet(no)" nz-tooltip nzTooltipTitle="分享设置"><i nz-icon nzType="setting"></i></a>
          <a (click)="delete(item['id'])" nz-tooltip nzTooltipTitle="删除"><i nz-icon nzType="delete"
              nzTheme="outline"></i></a>
        </div>
      </div>
      <div class="item-upload" *ngIf="!item['id']">
        <i nz-icon nzType="cloud-upload" nzTheme="outline"></i>
        <span>{{uploadStatusText}}</span>
        <nz-progress [nzPercent]="item['percent']" [nzShowInfo]="false"></nz-progress>
      </div>
    </div>
  </div>
  <nz-pagination [(nzPageIndex)]="selectData.pageindex" [nzTotal]="totalCount" (nzPageIndexChange)="getlist()">
  </nz-pagination>
</div>

<nz-modal nzWrapClassName="vertical-center-modal" [(nzVisible)]="isEditShow" (nzOnCancel)="editClose()"
  [nzMaskClosable]="false" nzWidth="800" nzTitle="点播详情" [nzFooter]="null">
  <div class="vod-info">
    <div nz-row [nzGutter]="16">
      <div nz-col nzSpan="4">直播间名称</div>
      <div nz-col nzSpan="16">{{data['title']}}</div>
    </div>
    <div nz-row [nzGutter]="16">
      <div nz-col nzSpan="4">直播间介绍</div>
      <div nz-col nzSpan="16">{{data['introduce']}}</div>
    </div>
    <div nz-row [nzGutter]="16">
      <div nz-col nzSpan="4">开始时间</div>
      <div nz-col nzSpan="16">{{data['startDate'] | date:'yyyy-MM-dd HH:mm:ss'}}</div>
    </div>
    <div nz-row [nzGutter]="16">
      <div nz-col nzSpan="4">结束时间</div>
      <div nz-col nzSpan="16">{{data['endDate'] | date:'yyyy-MM-dd HH:mm:ss'}}</div>
    </div>
    <div nz-row [nzGutter]="16">
      <div nz-col nzSpan="4">视频时长</div>
      <div nz-col nzSpan="16">{{data['minute']}}</div>
    </div>
    <div nz-row [nzGutter]="16">
      <div nz-col nzSpan="4">直播间LOGO</div>
      <div nz-col nzSpan="16">
        <app-image-view [data]="[logoUrl]" thumbnailHeight="100px"></app-image-view>
      </div>
    </div>
    <div nz-row [nzGutter]="16">
      <div nz-col nzSpan="4">播放地址</div>
      <div nz-col nzSpan="16"><input #playUrl nz-input readonly="readonly" [ngModel]="videoPlayUrl" /></div>
      <div nz-col nzSpan="4"><button nz-button (click)="copy()" nzType="primary">复制</button></div>
    </div>
  </div>
</nz-modal>
<nz-modal nzWrapClassName="vertical-center-modal" [(nzVisible)]="isPlayShow" (nzOnCancel)="playClose()"
  [nzMaskClosable]="false" nzWidth="800" nzTitle="视频详情" [nzFooter]="null">
  <app-video-player *ngIf="isPlayShow" [videoUrl]="videoPlayUrl"></app-video-player>
</nz-modal>
<nz-modal nzWrapClassName="vertical-center-modal" [(nzVisible)]="isShareSet" (nzOnCancel)="isShareSet=false"
  [nzMaskClosable]="false" nzWidth="800" nzTitle="分享设置" [nzFooter]="null">
  <div class="vod-info">
    <div nz-row [nzGutter]="16">
      <div nz-col nzSpan="4">微信分享标题</div>
      <div nz-col nzSpan="16">
        <input type="text" nz-input [(ngModel)]="selectVod['wxShareTitle']" placeholder="微信分享标题" />
      </div>
    </div>
    <div nz-row [nzGutter]="16">
      <div nz-col nzSpan="4">微信分享描述</div>
      <div nz-col nzSpan="16">
        <textarea rows="4" nz-input [(ngModel)]="selectVod['wxShareDesc']" placeholder="微信分享描述"></textarea>
      </div>
    </div>
    <div nz-row [nzGutter]="16">
      <div nz-col nzSpan="4">微信分享LOGO</div>
      <div nz-col nzSpan="16">
        <nz-upload class="avatar-uploader" [nzAction]="logoUploadUrl" [nzHeaders]="headers" nzName="file"
          nzListType="picture-card" [nzShowUploadList]="false" [nzBeforeUpload]="beforeUpload"
          (nzChange)="handlewxCoverChange($event)">
          <ng-container *ngIf="!selectVod['wxShareCover']">
            <i class="upload-icon" nz-icon [nzType]="isLoading ? 'loading' : 'plus'"></i>
            <div class="ant-upload-text">Upload</div>
          </ng-container>
          <img *ngIf="selectVod['wxShareCover']" [src]="ossUrl + selectVod['wxShareCover']"
            style="width: 100%; border-radius: 10px;" />
        </nz-upload>
      </div>
    </div>
    <div nz-row [nzGutter]="16">
      <button nz-button [nzType]="'primary'" (click)="updateShare()">提交</button>
    </div>
  </div>
</nz-modal>
